<template>
  <div class='item-config'>
    <el-form :model="logmeinConfigForm"
             label-position="top"
             label-width="100px"
             ref="logmein-config-form"
             :rules="logmeinConfigRules">
      <el-form-item :label="$t('custom.connector.logmein.username')"
                    prop="username">
        <el-input v-model="logmeinConfigForm.username"
                  :placeholder="$t('custom.connector.logmein.interuserName')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.connector.logmein.password')"
                    prop="password">
        <el-input v-model="logmeinConfigForm.password"
                  :type="passwordCheck?'text':'password'"
                  :placeholder="$t('custom.connector.logmein.interpassword')">
                     <i slot="suffix" :class="passwordCheck?'cuifont icon_eye_show':'cuifont icon_eye_hide'"
                      @click="passwordCheck=!passwordCheck"></i>
                  </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   :loading="testLoading"
                   style="width:165px;margin-top: 6px;"
                   size="small"
                   @click="startTestConfig">{{ $t('custom.connector.savequickbookspath') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Component } from './modules/Component.js'
import Trail from '@/components/storybook/mixins/trail'

export default {
  mixins: [Trail],

  props: {
    logmeinConfigForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      passwordCheck: false,
      passwordCheckCode: false,
      logmeinConfigRules: {
        username: [
          { required: true, message: this.$t('custom.connector.logmein.interuserName'), trigger: 'blur', pattern: '[^ \x22]+' }
        ],
        password: [
          { required: true, message: this.$t('custom.connector.logmein.interpassword'), trigger: 'blur' }
        ]
      },
      testPermissionDataList: null,
      testpermissionVisible: false,
      testLoading: false,
      testpermissionLoading: false
    }
  },
  methods: {
    cancelThisConfig () {
      this.logmeinConfigForm = {
        username: '',
        password: '',
      }
    },
    startTestConfig () {
      this.validateConfigForm().then(() => {
        this.testLoading = true
        const params = {
          ...this.logmeinConfigForm,
          tenantId: this.$store.state.user.tenantCode,
          subjectCode: 'LOGMEIN'
        }
        if (params.clientId) {
          delete params.clientId
        }
        this.$interface.taskManager.postClientData(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.testLoading = false
              Component.$emit('getConnectorConfig')
              return this.$message.error(res.msg)
            }
            this.testLoading = false
            this.synctdData()
            return this.$message.success(res.msg)
          }).catch(() => {
            this.testLoading = false
          })
      })
    },
    validateConfigForm () {
      return this.$refs['logmein-config-form'].validate()
    },
    synctdData (itemInfo) {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        subjectCode: 'LOGMEIN'
      }
      this.$interface.taskManager.syncClientData(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        Component.$emit('getConnectorConfig')
        return this.$message.success(res.msg)
      }).catch(() => {
      })
    },
    detail () {

    }
  }
}
</script>
